<template>
  <div class="footer" >
    <div class="foot">
		<div class="foot-logo">
			<img src="../../public/img/logo.png" alt="">
		</div>
		<div class="foot-nav">
			<h3>快速链接</h3>
			<ul>
			  <li v-for="(nav, index) in navList" :key="index">
			    <h3>
			      <router-link :to="nav.path" >
			        <span>{{ nav.name }}</span>
			      </router-link>
			    </h3>
			  </li>
			</ul>
		</div>
		<div class="foot-contact">
			<h3>联系我们</h3>
			<div class="contact-box">
				<p>联系电话：13666666666</p>
				<p>联系人：李三</p>
				<p>地址：河北省石家庄市开发区赣江路</p>
			</div>
		</div>
	</div>
	<!-- <h3 style="margin:10px auto 20px;text-align:center;color:#ffffff">版权所有：河北省职业技能公共实训基地</h3> -->
  </div>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from "vue";
const navList = ref<any>([
  {
    "path": "/course",
    "name": "课程学习"
  },
  {
    "path": "/exam",
    "name": "在线考试"
  },
  {
    "path": "/practice",
    "name": "题库练习"
  },
  {
    "path": "/news",
    "name": "新闻资讯"
  },
  {
    "path": "/userCenter",
    "name": "个人中心"
  }
  // ,
  // {
  //   "path": "/chatGPT",
  //   "name": "智能助手"
  // }
]);

</script>
<style lang="less" scoped>
.footer{
	width:100%;
	background-color:rgba(74,138,226,1);
	.foot{
		width:1200px;
		margin:20px auto;
		overflow:hidden;
		.foot-logo{
			width:40%;
			float:left;
			padding-top:20px;
			img{
				width:100%;
			}
		}
		.foot-nav{
			width:30%;
			padding-left:70px;
			padding-right:70px;
			float:left;
			>h3{
				color:#ffffff;
			}
			ul{
				li{
					width:50%;
					float:left;
					h3{
						a{color:#ffffff;font-size:14px;}
					}
				}
			}
		}
		.foot-contact{width:30%;float:right;color:#ffffff;}
	}
}

</style>
